<template>
  <view class="contenter">
    <view class="order">
      <view class="orderTop">
        <view class="top u-flex">
          <u-image :src="`/static/icon/store.png`"  :height="37" :width="37" :fade="false"></u-image>
          <view class="name">{{item.store_name}}</view>
        </view>
        <view class="bottom">
          <view class="u-flex">
            <u-icon name="account"  color="#45806E" size="28"></u-icon>
            <view class="name">{{item.user_name}}</view>
          </view>
          <view class="u-flex">
            <u-icon name="phone"  color="#45806E" size="28"></u-icon>
            <view class="name">{{item.phone}}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="detail">
          <view class="u-flex head">
            <view class="lv"></view>
            <view class="name">服务详情</view>
          </view>
          <view class="main u-margin-top-20" v-for="(data,index) in item.service" :key="index">
            <view class="top u-flex">
              <item-image :img="data.image" :height="160" :width="160"></item-image>
              <view class="flex_bt flex-column con" >
                <view class="flex_bt u-flex">
                  <view class="name">{{data.sname}}</view>
                  <view class="price" v-html="status"></view>
                </view>
                <view class="time">预约时间：{{item.otime}}</view>
              </view>
            </view>
            <view class="bottom">
              <view  class="flex_bt u-flex">
                <view class="name">服务时长</view>
                <view class="time">{{data.sminute}}分钟</view>
              </view>
<!--              <view  class="flex_bt u-flex">-->
<!--                <view class="name">休息时长</view>-->
<!--                <view class="time">{{item.rest_time}}分钟</view>-->
<!--              </view>-->
            </view>
          </view>
        </view>
        <view class="orderDetail">
          <view class="head u-flex ">
            <view>
              订单信息
            </view>
          </view>
          <view class="bot">
            <view  class="flex_bt u-flex">
              <view class="name">订单编号</view>
              <view class="time u-flex">
                <view>{{item.apporderid}}</view>
                <view class="copy" @click="copy">复制</view>
              </view>
            </view>
            <view  class="flex_bt u-flex">
              <view class="name">下单时间</view>
              <view class="time">{{item.createdate}}</view>
            </view>
            <view  class="flex_bt u-flex" v-if="item.status == 5">
              <view class="name">取消时间</view>
              <view class="time">{{item.cancel_time}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      option:{},
      item:{},
    }
  },
  computed:{
    status(){
      // 1-待确认；2-待服务；3-待评价；4-售后;5-已取消
      switch (this.item.status){
        case 1:return '待确认'
        case 2:return '待服务'
        case 3:return '待评价'
        case 4:return '售后'
        case 5:return '已取消'
      }
    },
  },
  onLoad(option){
    this.option = option
    this.setData()
  },
  methods:{
    setData(){
      this.$api.serviceCount({id:this.option.id}).then(res => {
        this.item = res.data
      })
    },
    copy(val){
      uni.setClipboardData({
        data:val,//要被复制的内容
        success:()=>{//复制成功的回调函数
          this.$u.toast('复制成功')
        }
      });

    },
  },
}
</script>

<style scoped lang="scss">
  .order{
    padding: 32rpx;

    .orderTop{
      width: 100%;
      height: 220rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      .top{
        width: 100%;
        height: 96rpx;
        background: $uni-color-primary;
        opacity: 1;
        border-radius: 12rpx 12rpx 0px 0px;
        padding: 0 32rpx;
        .name{
          color: white;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
      .bottom{
        width: 100%;
        padding: 0 32rpx;

        .u-flex{
          font-size: 24rpx;
          color: $uni-text-color;
          margin-top: 20rpx;
          .name{
            margin-left: 16rpx;
          }
        }
      }
    }
    .detail{
      .main{
        background: white;
        border-radius: 12rpx;
        padding: 32rpx 16rpx;
        .top{
          padding-bottom: 20rpx;
          .con{
            width: 100%;
            height: 160rpx;
            margin-left: 20rpx;

            .name{
              font-size: 32rpx;
              color: $uni-text-color;
            }
            .price{
              color: $uni-color-price;
              color: 28rpx;
            }
            .time{
              font-size: 28rpx;
              color: $uni-text-color;
            }
          }
        }


        .bottom{
          border-top: 2rpx solid $uni-border-color;
          .u-flex{
            margin-top: 28rpx;
          }
          .name{
            font-size: 28rpx;
            color: $uni-text-color;
          }
          .time{
            font-size: 28rpx;
            color:#000;
          }
        }

      }
      .head{
        .lv{
          width: 10rpx;
          height: 40rpx;
          background: $uni-color-primary;
          margin-right: 10rpx;
          border-radius: 30rpx;
        }
        .name{
          font-size: 32rpx;
          font-weight: bold;
        }
        margin-top: 42rpx;
        margin-bottom: 20rpx;
      }

    }
    .orderDetail{
      background: white;
      border-radius: 12rpx;
      margin-top: 20rpx;
      padding-bottom: 32rpx;
      .head{
        height: 85rpx;
        border-bottom: 2rpx solid $uni-border-color;
        font-size: 32rpx;
        color: #000;
        view{
          padding-left: 16rpx;
        }
      }
      .bot{
        padding: 0 16rpx;
        font-size: 28rpx;
        color: #4b4b4b;
        .u-flex{
          margin-top: 20rpx;
        }
        .copy{
          width: 82rpx;
          height: 44rpx;
          background: #FFFFFF;
          border: 2rpx solid #E3E3E3;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }
  }
</style>